<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import { addUser } from '#/api/gis/user';
import type { AddUserParams } from '#/api/gis/user';
import { message } from 'ant-design-vue';
import { z } from '#/adapter/form';

const [AddModal, AddmodalApi] = useVbenModal({
});

const [BaseForm] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入用户名',
      },
      fieldName: 'userName',
      label: '用户名：',
      rules: z.string()
        .min(5, { message: '用户名至少需要5个字符' })
        .max(10, { message: '用户名最多可以有10个字符' }),
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入姓名',
      },
      fieldName: 'realName',
      label: '姓名：',
      rules: "required"
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入邮箱',
      },
      fieldName: 'email',
      label: '邮箱：',
      rules: z.string().email({ message: '请输入有效的邮箱地址' }),
},
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入电话号码',
    },
    fieldName: 'phoneNumber',
    label: '电话：',
    rules: z.string().regex(/^1[3-9]\d{9}$/, { message: '请输入有效的电话号码' }),
},
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '管理员',
          value: 'super',
        },
        {
          label: '技术员',
          value: '1',
        },
        {
          label: '运维员',
          value: '2',
        },
      ],
    },
    fieldName: 'role',
    label: '用户身份：',
    rules:"selectRequired"
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '男',
          value: 0,
        },
        {
          label: '女',
          value: 1,
        },
      ],
    },
    fieldName: 'sex',
    label: '性别：',
    rules:"selectRequired"
  },

  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '冻结',
          value: 1,
        },
        {
          label: '正常',
          value: 0,
        },
      ],
    },
    fieldName: 'status',
    label: '用户状态：',
    rules:"selectRequired"
  },

  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入备注',
    },
    fieldName: 'remark',
    label: '备注',
  },
  ],
});

// 定义一个自定义事件
const emit = defineEmits(['refreshTable']);
function onSubmit(values: Record<string, any>) {
  const params = values as AddUserParams;
  addUser(params).then(() => {
    AddmodalApi.close();
    message.success('添加人员成功');
    emit('refreshTable'); // 触发自定义事件
  }).catch((error) => {
    console.error('添加人员失败:', error);
  });
}
</script>

<template>
  <AddModal title="添加人员">
    <BaseForm />
    <template #prepend-footer>
    </template>
  </AddModal>
</template>
